<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>login</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="logo_box">
						<!-- <h3 style="transform: translateY(-10px);font-size: 40px;">我的编程学习</h3> -->
						<form action="#" name="f" method="post">
							<div class="input_outer">
								<span class="u_user"></span>
								<input id="account" onkeydown="enter(event)" name="logname" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户">
							</div>
							<div class="input_outer">
								<span class="us_uer"></span>
								<input id="password" onkeydown="enter(event)" name="logpass" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
							</div>
							<div id="login" class="mb2"><a class="act-but submit" href="javascript:;" style="color: #FFFFFF" onclick="ceshi_axios()">登录</a></div>
						</form>
					</div>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/TweenLite.min.js"></script>
		<script src="js/EasePack.min.js"></script>
		<script src="js/rAF.js"></script>
		<script src="js/demo-1.js"></script>
		<div style="text-align:center;"></div>
</body>
</html>
<script>
	//ajax请求示例
	function ceshi_AJAX() {
		var ajaxObj = new XMLHttpRequest();
		ajaxObj.open('get', 'http://localhost:8888/ceshi/getCeshi')
		ajaxObj.send()
		// console.log(ajaxObj.readyState)
		// console.log(ajaxObj.responseText)
		ajaxObj.onreadystatechange = function () {
			if (ajaxObj.status != 200) {
				alert("后台挂了")
				return
			}
			if (ajaxObj.readyState == 4) {
				console.log(ajaxObj.responseText)
				if (ajaxObj.responseText === '111') {
					alert("登录成功")
					// window.open('http://baidu.com')
					window.location.href = 'http://baidu.com'
				} else {
					alert("登录失败")
				}
			}
		}
	}
	//axios请求
	function ceshi_axios() {
		let account = document.getElementById("account").value
		let password = document.getElementById("password").value
		if(!account || !password) {
			return
		}
		let login_element = document.getElementById("login")
		login_element.style = 'pointer-events: none;'
		// 为给定 ID 的 user 创建请求
		// axios.get('http://localhost:8888/ceshi/getCeshi')
		// .then(function (response) {
		// 	console.log(response);
		// })
		// .catch(function (error) {
		// 	console.log(error);
		// });

		// 上面的请求也可以这样做
		axios.post('http://localhost:8888/user/login', 
			data = {
				account,
				password: password
			}
		)
		.then(function (response) {
			// console.log(response);
			alert(response.data.message)
			if(response.data.code === 200) {
				let user = JSON.stringify({account, password})
				window.sessionStorage.setItem('user', user)
				window.location.href = "../index.html"
			}
		})
		.catch(function (error) {
			// console.log(error);
			alert("服务器歇菜了")
			login_element.style = "pointer-events: '';"
		});
	}

	//回车匹配
	function enter(e) {
		var keyCode = window.event ? e.keyCode:e.which;
		if (keyCode === 13) {
			var input_account_element = document.getElementById("account")
			var input_password_element = document.getElementById("password")
			if (input_account_element.value === '') {
				input_account_element.focus()
			} else if (input_password_element.value === '') {
				input_password_element.focus()
			} else {
				ceshi_axios()
			}
		}	
	}
</script>